<html>
    <head>
        <title>Customers</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
        <div id="page">
            <div id="logo">
                <h1><a href="#">Customers</a></h1>
                <div class='div'>
                    &nbsp
                </div>
                <br/>
                <form onsubmit="handleSubmit(); return false;">
               
                    <div class='field'>
                        Name:<input type='text' id='firstname' name='firstname'>
                    </div>
                    <div class='field'>
                        Middle:<input type='text' id='middlename' name='middlename'>
                    </div>
                    <div class='field'>
                        Last:<input type='text' id='lastname' name='lastname'>
                    </div>
                    <div class='field'>
                        Phone:<input type='text' id='phone' name='phone'>
                    </div>
                    <div class='field'>
                        Phone:<input type='text' id='mobile' name='mobile'>
                    </div>
                    <div class='field'>
                        Email:<input type='text' id='email' name='email'>
                    </div>
                    <div class='field'>
                        Address1:<input type='text' id='address1' name='address1'>
                    </div>
                    <div class='field'>
                        Address2:<input type='text' id='address2' name='address2'>
                    </div>
                    <div class='field'>
                        Zipcode:<input type='text' id='zipcode' name='zipcode'>
                    </div>
                    <div class='field'>
                        BirthDate:<input type='text' id='birthdate' name='birthdate'>
                    </div>
                    <div class='field'>
                        Balance:<input type='text' id='balance' name='balance'>
                    </div>
                    <div class='field'>
                        Credit Limit:<input type='text' id='creditlimit' name='creditlimit'>
                    </div>
					<div class='field'>
					<input type='button' value='Save' onclick='SaveCustomer()' />
					</div>
					 <br/>
                    <div class='field'>
                        Search?:<input type='text'  id='searcht' name='searcht'></div>
						<div class='field'>	
                    <input type='button' class='buttons' value='Search' onclick='Search(getElementById("searcht").value);'/></div>
            
                    <div class='field'>
                        Load?:<input type='text' id='pid' name='pid'></div>
						<div class='field'>
                    <input type='button' value='Load' onclick='Load()'/>
					</div>
                </form><span id="status">&nbsp;</span>
            </div>
        </div>
        <!-- ====================================== -->
        <!-- End HTML code.  Begin JavaScript code. -->
        <script type="text/javascript" src="../gears_init.js">
        </script>
        <script type="text/javascript" src="sample.js">
        </script>
        <script>
            
            var db;
            init();
            
            // Open this page's local database.
            function init() {
              var success = false;
            
              if (window.google && google.gears) {
                try {
                  db = google.gears.factory.create('beta.database');
            
                  if (db) {
                    db.open('database-demo');
                    db.execute('create table if not exists Customer' +
                               ' (id int primarykey,' +
                                 ' firstname text,' +
                                 ' lastname text,' +
                                 ' middlename text,' +
                                 ' phone text,' +
                                 ' email text,' +
                                 ' address1 text,' +
                                 ' address2 text,' +
                                 ' zipcode text,' +
                                 ' zip4 text,' +
                                 ' birthdate text,' +
                                 ' balance real,' +
                                 ' creditlimit real,' +
                                 ' lastpayment text,' +
                                 ' lastsale text' +
                                 ')');
            
                    success = true;
                    // Initialize the UI at startup.
                    
                    
                  }
            
                } catch (ex) {
                  setError('Could not create database: ' + ex.message);
                  alert('Could not create database: ' + ex.message);
                }
              }
            
              // Enable or disable UI elements
            
              var inputs = document.forms[0].elements;
              for (var i = 0, el; el = inputs[i]; i++) {
                el.disabled = !success;
              }
            
            }
            
            function SaveCustomer() {
              if (!google.gears.factory || !db) {
                alert('Error at submit');
                return;
              }
            
              var firstnameT = getElementById('firstname');
              var lastnameT = getElementById('lastname');
              var middlenameT = getElementById('middlename');
              var phoneT = getElementById('phone');
              var mobileT = getElementById('mobile');
              var emailT = getElementById('email');
              var address1T = getElementById('address1');
              var address2T = getElementById('address2');
              var zipcodeT = getElementById('zipcode');
              var birthdateT = getElementById('birthdate');
              var balanceT = getElementById('balance');
              var creditlimitT = getElementById('creditlimit');
              
              var firstname = firstnameT.value;
              var lastname = lastnameT.value;
              var middlename = middlenameT.value;
              var phone = phoneT.value;
              var mobile = mobileT.value;
              var email = emailT.value;
              var address1 = address1T.value;
              var address2 = address2T.value;
              var zipcode = zipcodeT.value;
              var balance = balanceT.value;
              var creditlimit = creditlimitT.value;
             
              var currTime = new Date().getTime();
            
              // Insert the new item.
              // The Gears database automatically escapes/unescapes inserted values.
              db.execute('insert into Customer (firstname, middlename, lastname, phone, mobile, email, address1, address2, zipcode, balance, creditlimit) values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)', [firstname, middlename, lastname, phone, mobile, email, address1, address2, zipcode, balance, creditlimit]);
            	alert('Customer added.');
              // Update the UI.
              //elm.value = '';
              
            }
            
            
            function deleteCustomer() {
              var recentPhrases = ['', '', ''];
            
              // Get the 3 most recent entries. Delete any others.
              var rs = db.execute('select * from customer order by 1 desc');
              var index = 0;
              while (rs.isValidRow()) {
                if (index < 3) {
                  recentPhrases[index] = rs.field(0)+'-'+ rs.field(1);
                } else {
                  alert('Nothing');//db.execute('delete from customer where id=?', [rs.field(1)]);
                }
                ++index;
                rs.next();
              }
              rs.close();
            
              var status = getElementById('status');
              status.innerHTML = '';
              for (var i = 0; i < recentPhrases.length; ++i) {
                var id = 'phrase' + i;
                status.innerHTML += '<span id="' + id + '"></span><br>';
                var bullet = '(' + (i + 1) + ') ';
                setTextContent(getElementById(id), bullet + recentPhrases[i]);
              }
            }
            
			  function Search(search){
                        var recentPhrases = ['', '', ''];
                        var query = 'select * from product where UPC like "' + search + '%"';
                        query += ' OR description like "' + search + '%"';
                        query += ' OR brand like "' + search + '%"';
                        query += ' OR model like "' + search + '%"';
                        //query += ' OR [type] like "' + search+ '%"';
                        
                        //alert(query);
                        
                        var status = getElementById('status');
                        status.innerHTML = '';//'Searching...' ;
                        var rs = db.execute(query);
                        var index = 0;
                        while (rs.isValidRow()) {
                            if (index < 3) {
                                recentPhrases[index] = rs.field(1) + '-' + rs.field(2);
                            }
                            ++index;
                            rs.next();
                        }
                        rs.close();
                        
                        
                        for (var i = 0; i < recentPhrases.length; ++i) {
                            var id = 'phrase' + i;
                            status.innerHTML += '<span id="' + id + '"></span><br>';
                            var bullet = '(' + (i + 1) + ')';
                            setTextContent(getElementById(id), bullet + recentPhrases[i]);
                        }
                    }
                    
                    function Load(){
                        var pidT = getElementById('pid');
                        var id = pidT.value;
                        
                        var rs = db.execute('select * from product where id=' + id);
                        var index = 0;
                        
                        var upcT = getElementById('upc');
                        var descriptionT = getElementById('description');
                        var brandT = getElementById('brand');
                        var modelT = getElementById('model');
                        var typeT = getElementById('type');
                        var quantityT = getElementById('quantity');
                        var orderedT = getElementById('ordered');
                        var costT = getElementById('cost');
                        var priceT = getElementById('price');
                        
                        while (rs.isValidRow()) {
                        
                            upcT.value = rs.field(1);
                            descriptionT = rs.field(2);
                            brandT.value = rs.field(3);
                            modelT.value = rs.field(4);
                            quantityT.value = rs.field(6);
                            orderedT.value = rs.field(7);
                            costT.value = rs.field(8);
                            priceT.value = rs.field(9);
                            loadProductTypes(rs.field(5));
                            
                            rs.next();
                        }
                        rs.close();
                    }
        </script>
    </body>
</html>
